import { Button, DatePicker, Input, InputNumber, message, Modal, Select } from 'antd';
import { Form } from '@ant-design/compatible';
import { connect } from 'dva';
import moment from 'moment';
import React, { PureComponent } from 'react';
import styles from '@/common/PateoTable/TableList.less';
import {merchantsType, transOption} from '@/utils/enums';
const merchantsOpt = transOption(merchantsType);

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
@Form.create()
class MerchantDetailModal extends PureComponent {
  state = {
    buttonLoading: false,
    uuid: null,
  };

  componentDidMount() {
    this.props.onRef(this);
  }

  setData = (data) => {
    console.log(data);
    this.setState({
      uuid: data?.uuid,
    });
    this.props.form.setFieldsValue({
      ...data,
      type: String(data.type),
      rangeDate: [moment(data.startDate), moment(data.endDate)],
    });
  };

  ok = (e) => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    form.validateFields((err, fieldsValue) => {
      console.log(fieldsValue);
      if (err) return;
      this.setLoading(true);
      let req = Object.assign({ uuid: this.state.uuid }, fieldsValue);
      req.startDate = moment(req.rangeDate[0]).format('YYYY-MM-DD');
      req.endDate = moment(req.rangeDate[1]).format('YYYY-MM-DD');
      delete req.rangeDate;
      dispatch({
        type: 'merchant/putObjWithRes',
        payload: {
          url: '/mscreditbusiness/merchants/manage',
          ...req,
        },
        callback: (response) => {
          this.setLoading(false);
          if (response.statusCode === '0') {
            message.success('保存成功');
            dispatch({
              type: 'common/pageablePost',
              payload: { url: '/mscreditbusiness/merchants/manage/list', delFlag: 0 },
            });
            this.close();
          } else {
            // message.error(response.statusMessage);
          }
        },
      });
    });
  };

  setLoading = (flag) => {
    this.setState({
      buttonLoading: flag,
    });
  };

  close = () => {
    const { closeModal, form } = this.props;
    form.resetFields();
    this.setState({
      buttonLoading: false,
    });
    closeModal();
  };

  renderSimpleForm() {
    const { modalVisible, isEdit } = this.props;
    const { buttonLoading } = this.state;
    const { getFieldDecorator } = this.props.form;
    const footer = (
      <div>
        <Button onClick={this.close} size="small">
          取消
        </Button>
        {isEdit && (
          <Button loading={buttonLoading} onClick={this.ok} type="primary" size="small">
            确定
          </Button>
        )}
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };
    return (
      <Modal
        footer={footer}
        title={isEdit ? '编辑商户' : '商户详情'}
        visible={modalVisible}
        onCancel={this.close}
        style={{ top: 50 }}
        width={600}
      >
        <Form style={{ marginTop: 12 }}>
          <FormItem
            // name="type"
            // rules={[{ required: true, message: '请选择商户类型' }]}
            {...formItemLayout}
            label="商户类型"
          >
            {getFieldDecorator('type', {
              rules: [{ required: true, message: '请填写商户名称' }],
            })(<Select options={merchantsOpt} disabled />)}
          </FormItem>
          <FormItem {...formItemLayout} label="商户名称">
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请填写商户名称' }],
            })(<Input maxLength={30} placeholder="请填写商户名称" disabled={!isEdit} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="商户账号">
            {getFieldDecorator('merchantName', {
              rules: [{ required: true, message: '请填写商户账号' }],
            })(<Input maxLength={64} placeholder="请填写商户账号" disabled={true} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="商户负责人手机号">
            {getFieldDecorator('merchantPhone', {
              rules: [
                { required: true, message: '请填写商户负责人手机号' },
                {
                  message: '请填写正确的手机号',
                  whitespace: true,
                  pattern: /^1[0-9][0-9]\d{8}$/,
                },
              ],
            })(<Input maxLength={11} placeholder="请填写商户负责人手机号" disabled={!isEdit} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="商户邮箱">
            {getFieldDecorator('merchantUserMail', {
              rules: [
                {
                  required: true,
                  message: '请填写正确的邮箱格式',
                  pattern:
                    /^[A-Za-z\d]+([-_\.][A-Za-z\d]+)*@([A-Za-z\d]+[-\.])+[A-Za-z\d]{2,4}(,[A-Za-z\d]+([-_\.][A-Za-z\d]+)*@([A-Za-z\d]+[-\.])+[A-Za-z\d]{2,4})*$/,
                },
              ],
            })(<Input maxLength={64} placeholder="请填写商户邮箱" disabled={!isEdit} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="商户有效期">
            {getFieldDecorator('rangeDate', {
              rules: [{ required: true, message: '请填写商户有效期' }],
            })(
              <RangePicker
                placeholder={['合作开始日', '合作截止日']}
                format="YYYY-MM-DD"
                allowClear
                style={{ width: '100%' }}
                disabled={!isEdit}
              />,
            )}
          </FormItem>
          <FormItem {...formItemLayout} label="商户地址">
            {getFieldDecorator('address', {
              // rules: [{ required: true, message: '请填写商户地址' }],
            })(<Input maxLength={50} placeholder="请填写商户地址" disabled={!isEdit} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="商户客服电话">
            {getFieldDecorator('servicePhone', {
              rules: [
                {
                  // required: true,
                  message: '请填写正确的电话号码',
                  pattern: /^1[1|3-9][0-9]{9}$/,
                },
              ],
            })(<Input maxLength={11} placeholder="请填写商户客服电话" disabled={!isEdit} />)}
          </FormItem>

          <FormItem {...formItemLayout} label="管理联系人邮箱">
            {getFieldDecorator('adminMail', {
              rules: [
                {
                  required: false,
                  message: '请填写正确的邮箱格式',
                  pattern:
                    /^[A-Za-z\d]+([-_\.][A-Za-z\d]+)*@([A-Za-z\d]+[-\.])+[A-Za-z\d]{2,4}(,[A-Za-z\d]+([-_\.][A-Za-z\d]+)*@([A-Za-z\d]+[-\.])+[A-Za-z\d]{2,4})*$/,
                },
              ],
            })(<Input maxLength={64} placeholder="请填写管理联系人邮箱" disabled={!isEdit} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="备注">
            {getFieldDecorator('remarks', {
              rules: [{ required: false, message: '' }],
            })(<Input placeholder="请填写备注" disabled={!isEdit} />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }

  renderForm() {
    return this.renderSimpleForm();
  }
  render() {
    return <div className={styles.tableListForm}>{this.renderForm()}</div>;
  }
}
export default connect((state) => {
  return {
    merchant: state.merchant,
  };
})(MerchantDetailModal);
